<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source"></select-app-source>
                </el-form-item>
                <el-form-item label="日期" prop="day">
                    <picker-date-range v-model="search.day"></picker-date-range>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>
        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            show-footer
            :footer-method="footerMethod"
            :row-class-name="tableRowClassName"
            :max-height="maxHeight">
<!--            <vxe-table-column label="ID" prop="id" width="80" fixed="left"/>-->
            <vxe-table-column title="日期" field="day" width="90" fixed="left"/>
<!--            <vxe-table-column title="渠道类型" field="app_source.type" width="100" formatter="formatAppSourceType"/>-->
            <vxe-table-column title="渠道" field="source" width="150" formatter="formatAppSourceName"/>
            <vxe-table-column title="新增人数" field="registerUser" width="70"/>
            <vxe-table-column title="去新增活跃人数" field="loginOldUser" width="110"/>
            <vxe-table-column title="活跃人数" field="loginUser" width="70"/>
            <vxe-table-column title="新增用户充值金额(元)" field="payFirst" formatter="formatHumanRmb" width="140"/>
            <vxe-table-column title="新增用户充值人数" field="payFirstUser" width="120"/>
            <vxe-table-column title="首日充值率" field="payFirstUserScale" formatter="formatPercent" min-width="90"/>
            <vxe-table-column title="新增PUR" field="purFirst" formatter="formatPercent" width="70"/>
            <vxe-table-column title="新增ARPPU" field="arppuFirst" :formatter="['formatHumanRmb', 2]" width="90"/>
            <vxe-table-column title="新增ARPU" field="arpuFirst" :formatter="['formatHumanRmb', 2]" width="80"/>
            <vxe-table-column title="去新增充值金额(元)" field="payOld" formatter="formatHumanRmb" width="130"/>
            <vxe-table-column title="去新增充值人数" field="payOldUser" width="110"/>
            <vxe-table-column title="去新增PUR" field="purOld" formatter="formatPercent" width="90"/>
            <vxe-table-column title="去新增ARPPU" field="arppuOld" :formatter="['formatHumanRmb', 2]" width="100"/>
            <vxe-table-column title="去新增ARPU" field="arpuOld" :formatter="['formatHumanRmb', 2]" width="100"/>

            <vxe-table-column title="总充值金额(元)" field="pay" formatter="formatHumanRmb" width="110"/>
            <vxe-table-column title="总充值人数" field="payUser" width="100"/>
            <vxe-table-column title="PUR" field="pur" formatter="formatPercent" width="70"/>
            <vxe-table-column title="ARPPU" field="arppu" :formatter="['formatHumanRmb', 2]" width="110"/>
            <vxe-table-column title="ARPU" field="arpu" :formatter="['formatHumanRmb', 2]" width="110"/>

            <vxe-table-column title="新增用户积分" field="thirdExchangeFirst" :formatter="['formatW', 1]" width="140"/>
            <vxe-table-column title="新增用户积分人数" field="thirdExchangeFirstUser" width="120"/>
            <vxe-table-column title="去新增用户积分" field="thirdExchangeOld" :formatter="['formatW', 1]" width="150"/>
            <vxe-table-column title="去新增用户积分人数" field="thirdExchangeOldUser" width="130"/>

            <vxe-table-column title="总积分数量" field="thirdExchange" :formatter="['formatW', 1]" width="120"/>
            <vxe-table-column title="总积分人数" field="thirdExchangeUser" width="110"/>

<!--            <vxe-table-column title="新增用户毛利(元)" field="userProfitFirst" formatter="formatHumanRmb" width="130" :title-help="{message: '新增充值-新增积分'}"/>-->
<!--            <vxe-table-column title="去新增用户毛利(元)" field="userProfitOld" formatter="formatHumanRmb" width="140" :title-help="{message: '去新增充值-去新增积分'}"/>-->
<!--            <vxe-table-column title="平台毛利(元)" field="platformProfit" formatter="formatHumanRmb" width="110" :title-help="{message: '充值 - 积分'}"/>-->

<!--            <vxe-table-column title="推广费" field="cplCost" formatter="formatHumanRmb"/>-->
<!--            <vxe-table-column title="首日充值金额" field="payFirst" formatter="formatHumanRmb"/>-->
<!--            <vxe-table-column title="充值率" field="payUser"/>-->
<!--            <vxe-table-column title="ARPPU" field="arppu" formatter="formatHumanRmb"/>-->
<!--            <vxe-table-column title="ARPU" field="arpu" formatter="formatHumanRmb"/>-->
<!--            <vxe-table-column title="ROI" field="roi" formatter="formatHumanRmb"/>-->
<!--            <vxe-table-column title="毛利" field="normalProfit" formatter="formatHumanRmb"/>-->
<!--            <vxe-table-column title="净利润" field="netProfit" formatter="formatHumanRmb"/>-->
        </vxe-table>

        <el-pagination
            class="pull-right clearfix"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<script>
import SelectAppSourceType from '~/components/Select/app-source-type';
import VXETable from "vxe-table";

export default {
    components: {
        SelectAppSourceType,
    },
    data() {
        return {
            search: {
                source: '',
                source_type: '',
                day: [],
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 50,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,

            monthPay: 0,
            monthPayUser: 0,
            monthLoginUser: 0,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 300;
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/Daily', filter).then(({data}) => {
                this.totalDataNumber = data.meta.total;
                this.monthPay = data.monthPay;
                this.monthPayUser = data.monthPayUser;
                this.monthLoginUser = data.monthLoginUser;
                this.$refs.xTable.reloadData(data.data)
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = [
                moment().startOf('d').unix(),
                moment().endOf('d').unix(),
            ];
        },
        tableRowClassName({row, rowIndex}) {
            // if (!row.GetAwardBullet) return '';
            // if (row.award_status === 1) return 'color-danger';
            // return 'color-success';
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: this.$route.meta.title + '-日报表2',
                type: 'xlsx'
            })
        },
        footerMethod({columns, data}) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return index < 2;
            }, (sums, allFields) => {
                sums[allFields.withdrawOldUser] = '-';
                sums[allFields.pur] = this.$helper.numberPercent(sums[allFields.payUser] / sums[allFields.loginUser]);
                sums[allFields.purFirst] = '-';
                sums[allFields.purOld] = '-';
                //sums[allFields.arpu] = this.$helper.numberFixed(sums[allFields.payFirst] / sums[allFields.registerUser]);
                sums[allFields.arpuFirst] = '-';
                // sums[allFields.arpuOld] = '-';
                sums[allFields.arppuFirst] = '-';
                // sums[allFields.arppuOld] = '-';

                // 计算 去新增arpu
                sums[allFields.arpuOld] = this.$helper.numberFixed(sums[allFields.loginOldUser] ? sums[allFields.payOld] / sums[allFields.loginOldUser] : 0);
                // 计算 去新增arppu
                sums[allFields.arppuOld] = this.$helper.numberFixed(sums[allFields.payOldUser] ? sums[allFields.payOld] / sums[allFields.payOldUser] : 0);

                // sums[allFields.loginUser] = this.$helper.numberFixed(this.monthLoginUser);
                // sums[allFields.payUser] = this.$helper.numberFixed(this.monthPayUser);
                sums[allFields.arppu] = this.$helper.numberFixed(sums[allFields.pay] / sums[allFields.payUser]);
                sums[allFields.arpu] = this.$helper.numberFixed(sums[allFields.pay] / sums[allFields.loginUser]);
                sums[allFields.loginOldUser] = '-';
                sums[allFields.payOldUser] = '-';
                // 计算 payFirstUserScale
                sums[allFields.payFirstUserScale] = sums[allFields.registerUser] ? sums[allFields.payFirstUser] / sums[allFields.registerUser] : 0;
                return sums;
            });
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

